
<html>
<head>
<title>CSS3测试页</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="" />


<style type="text/css">



body{text-align:center;background-color:#c7edcc;}














#top{
	position:relative;
	border: 1px solid #000;
	margin:0px auto;
	width:1000px;
	height:250px;
	z-index:1;	/*当你定义的CSS中有position属性值为absolute、relative或fixed*/
}

#middle{
	position:relative;
	border: 1px solid #000;
	margin:10px auto;
	width:1000px;
	height:600px;
}

#footer{
	position:relative;
	border: 1px solid #000;
	margin:10px auto;
	width:1000px;
	height:100px;
}


#topPhoto{
	border: 1px solid #000;

	width:1000px;
	height:200px;
}

#frame1{

	border: 1px solid #000;
	margin:0px auto;
	width:320px;
	z-index:1;
}

#frame2{

	border: 1px solid #000;
	margin:0px auto;
	width:150px;
	height:500px;
	float:left;
}

#frame3{

	border: 1px solid #000;
	margin:0px auto;
	width:840px;
	height:500px;
	float:left;
}

#content1{
	border: 1px solid #000;
	margin:10px 0px 0px 10px;
	width:405px;
	height:235px;
	float:left;
}

#content2{
	border: 1px solid #000;
	margin:10px 0px 0px 10px;
	width:405px;
	height:235px;
	float:left;
}

#content3{
	border: 1px solid #000;
	margin:10px 0px 0px 10px;
	width:405px;
	height:235px;
	float:left;
}

#content4{
	border: 1px solid #000;
	margin:10px 0px 0px 10px;
	width:405px;
	height:235px;
	float:left;
}


#trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0 ; }
#trans-nav li { float: left; position: relative; padding: 0; line-height: 40px; background: #5a8078 url(nav-bg.png) repeat-x 0 0; }
#trans-nav li:hover { background-position: 0 -40px; }
#trans-nav li a { display: block; padding: 0 15px; color: #fff; text-decoration: none; }
#trans-nav li a:hover { color: #a3f1d7; }

#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #63867f; list-style-type: none; padding: 0; margin: 0; }
#trans-nav li:hover ul { opacity: 1; }
#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#trans-nav li:hover ul li { height: 30px; line-height: 30px; }
#trans-nav li ul li a { background: #63867f; }
#trans-nav li ul li a:hover { background: #5a8078; }

#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.5s; }
#trans-nav li ul { -webkit-transition: all 1s; }
#trans-nav li ul li { -webkit-transition: height 0.5s; }
</style>

<script type="text/javascript">



 window.onload=function() {
	var mycanvas=document.getElementById("myCanvasTag");
	var mycontext=mycanvas.getContext('2d');
	mycontext.fillStyle='rgb(0,0,200)'; 
	mycontext.fillRect(0,0,100,100,0.5);   /*方法参数，X，Y，X方向像素，Y方向像素，透明度*/
	mycontext.fillStyle='rgb(200,0,0)';  
	mycontext.fillRect(25,25,100,100,0.5);    
	mycontext.fillStyle='rgb(0,200,0)';  
	mycontext.fillRect(50,50,100,100,0.5);
	mycontext.fillStyle='rgb(100,100,100)';  
	mycontext.fillRect(75,75,100,100,0.5);
	mycontext.fillStyle='rgb(222,222,222)';  
	mycontext.fillRect(100,100,100,100,0.5);
   
    var mycanvas=document.getElementById("myCanvasTag2");
    var mycontext=mycanvas.getContext('2d');
    var mygradient=mycontext.createRadialGradient(100,100,0,100,100,140);//圆形渐变，圆心的XY坐标，圆的初始半径，圆结整的XY坐标，圆的结束半径
	//var mygradient=mycontext.createLinearGradient(0,0,200,200); //线性渐变，参数开始点的XY坐标，结束点的XY坐标
    mygradient.addColorStop("0","magenta");//可控的颜色渐变
    mygradient.addColorStop(".25","blue");
    mygradient.addColorStop(".50","green");
    mygradient.addColorStop(".75","yellow");
    mygradient.addColorStop("1.0","red");                
    mycontext.fillStyle=mygradient;
    mycontext.fillRect(0,0,200,200);//画布显示区域，类似蒙板
	
	var mycanvas=document.getElementById("myCanvasTag3");
    var mycontext=mycanvas.getContext('2d');
	mycontext.beginPath();
	mycontext.arc(100, 100, 50, Math.PI * 0.5, Math.PI * 2, false);//画圆，参数是圆心XY轴，圆半径，起始角度，结束角度，true逆时针画false顺时针画
	mycontext.closePath();
	mycontext.stroke();
	
	var mycanvas=document.getElementById("myCanvasTag4");
	var mycontext=mycanvas.getContext('2d');
	mycontext.strokeStyle='rgb(0,0,0)';
	mycontext.beginPath();
	mycontext.moveTo(0,0);
	mycontext.lineTo(200,200);
	mycontext.stroke();
	mycontext.moveTo(20,20);//移到开始点
	mycontext.bezierCurveTo(20,100,200,100,200,20);//画贝尔曲线，第一个控制点的XY轴，第二个控制点的XY轴，结束点的XY轴.弧度的控制点像ps里的贝尔曲线
	mycontext.stroke();
	mycontext.closePath();

	mycontext.beginPath();//画三角形
	mycontext.moveTo(10,150);
	mycontext.lineTo(60,100);
	mycontext.lineTo(110,150);
	mycontext.closePath();
	mycontext.fillStyle='rgb(200,50,50)';  
	mycontext.fill();
	
 }


</script>

</head>
<body onLoad="">

<div id="top">
	<div id="topPhoto">顶图片框</div>
	<div id="frame1">
		<ul id="trans-nav">
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Products</a>
				<ul>
					<li><a href="#">Widgets</a></li>
					<li><a href="#">Thingamabobs</a></li>
					<li><a href="#">Doohickies</a></li>
				</ul>
			</li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
</div>

<div id="middle">
	<div id="frame2">左导航条</div>
	<div id="frame3">
		<div id="content1">
			<canvas id="myCanvasTag" width="200" height="200" style="background-color:#99edff;border: 2px yellow solid"></canvas>
		</div>
		<div id="content2">
			<canvas id="myCanvasTag2" width="200" height="200" style="background-color:#99edff;border: 2px yellow solid"></canvas>
		</div>
		<div id="content3">
			<canvas id="myCanvasTag3" width="200" height="200" style="background-color:#99edff;border: 2px yellow solid"></canvas>
		</div>
		<div id="content4">
			<canvas id="myCanvasTag4" width="200" height="200" style="background-color:#99edff;border: 2px yellow solid"></canvas>
		</div>
	</div>
</div>

<div id="footer">底信息框</div>





















</body>
</html>
